<template>
	<view class="content">
		<view class="skeleton" v-if="show">
			<view class="head flex">
				<view class="head_title">
					<nut-skeleton width="200rpx" height="40rpx" animated> </nut-skeleton>
				</view>
				<view class="head_right" >
					<nut-skeleton width="400rpx" height="40rpx" animated> </nut-skeleton>
				</view>
			</view>
			<view class="" style="margin: 100rpx 0; " v-for="(item, index) in 10" :key="index">
				<nut-skeleton width="400px" height="15px" title animated avatar avatar-size="200px" row="2">
				</nut-skeleton>
			</view>
		</view>

		<view class="structure" v-if="!show">
			<view class="banner">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" >
					<swiper-item v-for="(item,index) in 3" :key="index">
						<view class="swiper-item">
							<image :src="`http://fsl-test.dderp.cn:33548/adh-mini/index/banner${index+1}.png`" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="head flex padding" >
				<view class="head_title">
					拿货商家
				</view>
				<view class="head_right">
					<text :class="tab == '从未拿货'?'head_right_tab_1':''" @click="tab = '从未拿货'">从未拿货</text>
					<text :class="tab == '已拿过货'?'head_right_tab_1':''" @click="tab = '已拿过货'">已拿过货</text>
				</view>
			</view>
			<view class="list padding">
				<view class="list_item" v-if="tab == '从未拿货'" v-for="(item, index) in list" :key="index" @click="toPage(item)">
					<view class="item_img">
						<image class="image" src="http://fsl-test.dderp.cn:33548/adh-mini/indexlogo.png" alt=""></image>
					</view>
					<view class="item_info">
						<view class="info_title">{{item.brand_chnname}}</view>
						<view class="info_bz">{{item.brand_address}}</view>
						<view class="info_sts">
							<!-- <view class="view_2">累计进货 <text style="font-size: 32rpx;color: red;">3880.00</text> </view> -->
							<view class="view_2">累计进货 <nut-price :price="item.total_amount" size="normal" :need-symbol="false" /></view>
							<view class="view_2" style="font-size: 20rpx;color: #a1a1a1;">最近进货时间 {{item.last_order_date}} </view>
							<!-- <text class="view_1">九折</text>
							<text class="view_1">满1999减99</text> -->
						</view>
					</view>
					<!-- <view class="item_lat">
						<image class="image" v-if="index == 0" src="http://fsl-test.dderp.cn:33548/adh-mini/index/top1.png"
							alt=""></image>
						<image class="image" v-if="index == 1" src="http://fsl-test.dderp.cn:33548/adh-mini/index/top2.png"
							alt=""></image>
						<image class="image" v-if="index == 2" src="http://fsl-test.dderp.cn:33548/adh-mini/index/top3.png"
							alt=""></image>
					</view> -->
				</view>
				<view class="">
					<view class="list_item" v-if="tab == '已拿过货'" v-for="(item, index) in list" :key="index" @click="toPage(item)">
						<view class="item_img">
							<image class="image" src="http://fsl-test.dderp.cn:33548/adh-mini/indexlogo.png" alt=""></image>
						</view>
						<view class="item_info">
							<view class="info_title">{{item.agent_name}}</view>
							<view class="info_bz">{{item.agent_address}}</view>
							<view class="info_sts">
								<view class="view_2">累计进货 <text style="font-size: 32rpx;color: red;">3880.00</text> </view>
								<view class="view_2" style="font-size: 20rpx;color: #a1a1a1;">最近进货时间 2023-7-10 13:25:33 </view>
								<!-- <text class="view_1">九折</text>
								<text class="view_1">满1999减99</text> -->
							</view>
						</view>
					</view>
				</view>
				<view class="return_top">
					
				</view>
				<view class="botton_text" style="font-size: 25rpx;text-align: center;line-height: 80rpx;color: #a1a1a1;">
					到底了
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import {onShow, onLoad, onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app'
import {Proname} from '../../../api/api.js'
const show = ref(true)
const tab = ref('从未拿货')
const page = ref({
	page:1,
	limit:20,
	count:0
})
const list = ref([])
onShow(() => {
	// 判断用户是否登录
	let token = uni.getStorageSync('token')
	if(!token){
		uni.navigateTo({
			url:'/pages/login/login'
		})
		uni.showToast({
			title:'请先登录！',
			icon:'none'
		})
	}
})
onLoad(()=>{
	getBusinessArr()	
	setTimeout(() => {
		show.value = false
	}, 1000)
})
const handleClick = (e)=>{
	console.log(e);
}
const toPage = (item) => {
	uni.navigateTo({
		url: `/pages/tabbar/index/shop/shop_list?item=${JSON.stringify(item)}`
	})
}
const getBusinessArr = async ()=>{
	console.log(page.value);
	let param = {
		proname:'JJ0601',
		...page.value
	}
	let res = await Proname(param)
	if(res.msg == 'ok'){
		show.value = false
		list.value = res.rows
		page.value.count = res.count	
	}
	
	console.log(res);
}
onPullDownRefresh(() => {
	show.value = true
	setTimeout(() => {
		uni.stopPullDownRefresh();
		show.value = false
	}, 1000)
})
onReachBottom((e)=>{
	if(list.value.length != page.value.count){
		page.value.limit = page.value.limit * 2
		getBusinessArr()
	}else{
		uni.showToast({
			title:'已到底',
			icon:'none'
		})
	}
	
})
</script>

<style scoped lang="scss">
	.head_title{
		// padding-top: 20rpx;
	}
	.banner{
		width: 100%;
		swiper{
			width: 100%;
			height: 280rpx;
			image{
				width: 100%;
				height: 280rpx;
			}
		}
	}
page {
	background-color: #f6f6f6;
}

.content {
	background-color: #f6f6f6;

	.list {
		padding-top: 0;
		.list_item {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.item_img {
				flex: 2;

				.image {
					width: 145rpx;
					height: 145rpx;
				}
			}

			.item_info {
				flex: 6;
				font-size: 25rpx;
				padding: 0 20rpx;

				.info_title {
					font-size: 30rpx;
				}

				.info_bz {
					// line-height: 70rpx;
					padding: 10rpx 0;
					color: #666666;
				}
			}

			.item_lat {
				flex: 2;

				.image {
					float: right;
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
}
.head_right{
	text{
		background-color: #eeeeee;
		color: #c0c0c0;
		padding: 10rpx 20rpx;
		border-radius: 60rpx;
		margin-left: 15rpx;
		font-size: 25rpx;
	}
}
.head_right_tab_1{
	background-color: #ffe3e0 !important;
	color: #e41f19 !important;
}
</style>